<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置页面的字符编码为UTF-8，保证能正确显示各种字符 -->
    <meta charset="UTF-8">
    <!-- 设置页面在浏览器标签栏显示的标题 -->
    <title>达达微博</title>
    <!-- 引入内部样式表 -->
    <style>
        /* 全局样式重置，去除默认的边距和填充，使页面布局更可控 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #fff;
            line-height: 1.6;
        }

        /* 页面主体内容的外层容器样式 */
     .main-container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #111;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            animation: fadeInUp 1s ease both;
        }

        /* 定义淡入向上的动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #00ffff;
            text-transform: uppercase;
            letter-spacing: 2px;
            animation: neonGlow 1.5s ease infinite alternate;
        }

        /* 定义霓虹灯闪烁的动画效果 */
        @keyframes neonGlow {
            from {
                text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
            }

            to {
                text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff;
            }
        }

        /* 登录相关区域的样式，登录和未登录状态下的通用样式 */
     .auth-section {
            text-align: center;
            margin-bottom: 20px;
            opacity: 0;
            animation: fadeIn 1s ease forwards;
            animation-delay: 0.5s;
        }

        /* 定义淡入的动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

     .auth-section a {
            display: inline-block;
            margin: 0 10px;
            padding: 10px 20px;
            border: 2px solid #00ffff;
            border-radius: 5px;
            text-decoration: none;
            color: #00ffff;
            transition: all 0.3s ease;
            animation: pulse 1.5s ease infinite;
        }

        /* 定义脉冲式缩放的动画效果 */
        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

     .auth-section a:hover {
            background-color: #00ffff;
            color: #000;
        }

        /* 水平分割线样式 */
        hr {
            border: none;
            border-top: 1px solid #00ffff;
            margin: 20px 0;
            animation: slideIn 1s ease forwards;
            animation-delay: 1s;
            opacity: 0;
        }

        /* 定义滑动出现的动画效果 */
        @keyframes slideIn {
            from {
                transform: translateX(-50%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* 微博内容展示区域的每条微博样式 */
     .weibo-item {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #00ffff;
            border-radius: 5px;
            background-color: rgba(0, 255, 255, 0.1);
            opacity: 0;
            animation: fadeIn 1s ease forwards;
            animation-delay: 1.2s;
        }

     .weibo-item h3 {
            margin-bottom: 10px;
            color: #00ffff;
            animation: neonGlow 1.5s ease infinite alternate;
            animation-delay: 1.5s;
        }

     .weibo-item a {
            color: #00ffff;
            text-decoration: none;
            transition: all 0.3s ease;
            animation: pulse 1.5s ease infinite;
            animation-delay: 1.5s;
        }

     .weibo-item a:hover {
            text-decoration: underline;
        }

        /* 新增：定义图标发光的动画效果 */
        @keyframes iconGlow {
            from {
                text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
            }

            to {
                text-shadow: 0 0 3px #00ffff, 0 0 6px #00ffff, 0 0 9px #00ffff;
            }
        }

        /* 新增：图标类名样式，这里假设使用Font Awesome的图标，类名可根据实际图标调整 */
       .icon-cool {
            margin-right: 5px;
            font-size: 18px;
            color: #00ffff;
            animation: iconGlow 1.5s ease infinite alternate;
        }
    </style>
</head>

<body>
    <!-- 页面主体内容的外层容器，应用科技风样式类 -->
    <div class="main-container">
        <!-- 微博首页的标题 -->
        <h1>微博首页</h1>

        <!-- 根据是否登录来显示不同内容的逻辑判断 -->
        <div v-if="isLogin" class="auth-section">
            <!-- 欢迎已登录用户回来，显示用户昵称（使用Vue的插值表达式来绑定数据），并设置昵称颜色为暗红色 -->
            <h3>欢迎<span style="color: #00ffff">{{user.nickname}}</span>回来！</h3>
            <!-- 发微博的链接，跳转到/insert.html页面 -->
            <a href="/insert.html">发微博</a>
            <!-- 退出登录链接，使用javascript:void(0)废掉默认跳转功能，并绑定点击事件调用logout方法 -->
            <a href="javascript:void(0)" @click="logout()">退出登录</a>
        </div>
        <div v-else class="auth-section">
            <!-- 注册链接，跳转到/reg.html页面 -->
            <a href="/reg.html">注册</a>
            <!-- 注册链接，跳转到/login.html页面 -->
            <a href="/login.html">登录</a>
        </div>

        <!-- 水平分割线，用于视觉上区分不同部分 -->
        <hr>

        <!-- 使用v-for指令循环遍历arr数组（存放微博对象）来展示每条微博信息 -->
        <div v-for="w in arr" class="weibo-item">
            <!-- 新增：添加图标元素，这里使用Font Awesome的示例图标（fa-comment-dots），可按需替换 -->
            <h3>
                <i class="icon-cool fas fa-comment-dots"></i>
                <a :href="'/detail.html?id=' + w.id">
                    <span style="color: #00ffff">{{w.nickname}}</span>:{{w.content}}
                </a>
            </h3>
        </div>
    </div>

    <!-- 引入Axios框架文件，用于发送HTTP请求 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <!-- 引入Vue.js框架文件 -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        // 创建一个Vue实例
        let v = new Vue({
            // 绑定Vue实例作用的DOM元素选择器，这里选择body下的第一个div元素（带有main-container类的那个div）
            el: ".main-container",
            data: {
                // 用于标识用户是否登录，初始值设为false
                isLogin: false,
                // 用于存储登录用户的相关信息，初始为空对象
                user: {},
                // 用于存放微博数据的数组，初始为空数组
                arr: []
            },
            methods: {
                // 定义退出登录的方法，发送请求到/v1/users/logout接口，成功后将isLogin设为false
                logout() {
                    axios.get("/v1/users/logout").then(function (response) {
                        v.isLogin = false;
                    })
                }
            },
            created: function () {
                // 页面加载时，发送请求获取当前登录的用户对象
                axios.get("/v1/users/currentUser").then(function (response) {
                    // 根据返回的数据判断用户是否登录，若返回为空字符串表示未登录，否则表示已登录
                    v.user = response.data;
                    if (response.data == "") {
                        v.isLogin = false;
                    } else {
                        v.isLogin = true;
                    }
                });

                // 发送请求获取所有微博数据
                axios.get("/v1/weibo/selectIndex").then(function (response) {
                    v.arr = response.data;
                });
            }
        });
    </script>
</body>

</html>